<template>
	<view>
		<!--主体-->
		<view style="margin-top: 10upx;height: 120%;" class="flex bg-gray">
			<scroll-view scroll-y style="height: calc(100vh - 300upx);width: 200upx;">
				<view @click="clickType(index)" class="type-item" v-for="(type,index) in types" :key="index" :class="thisType==index?'text-bold bg-gradual-blue':''"
				 :style="{fontSize:thisType==index?'125%':'100%'}">
					{{type.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y style="height: calc(100vh - 300upx);width: 550upx;" class="bg-white">
				<view class="flex flex-wrap">
					<view class="flex justify-center align-center" style="width: 275upx;margin-top: 10updx;" v-for="(good,index) in goods[thisType]" :key="index">
						<view>
							<image :src="good.img" style="width: 180upx;height: 180upx;"></image>
							<view style="text-align: center;">{{good.content}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!--主体-->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选中的分类
				thisType: 0,

				//搜索
				search: "",

				//标签下标
				thisIndex: 1,

				//类目
				types: [],

				//商品
				goods: [],
			}
		},
		onLoad() {
			this.getTypes();
		},
		mounted() {
			this.getTypes();
			this.getGoods();
		},
		methods: {
			//页面跳转
			goPage(e) {
				var index = e;
				if (this.thisIndex === index) {
					return;
				}
				var url = this.TabList[index].url;
				uni.navigateTo({
					url: url
				});
			},
			//获取分类数据
			getTypes() {
				var data = [{
					name: "文具",
				}, {
					name: "课程",
				}, {
					name: "其他",
				}];
				this.types = data;
			},
			//点击分类事件
			clickType(e) {
				this.thisType = e;
			},
			//商品数据
			getGoods() {
				var data = [
					[
						{
							img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks175goGAARZsAAeU7Myhxjo003.jpg",
							content: "铅笔盒",
						},
						{
							img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks175gqCAB123AACU6R6saLQ090.jpg",
							content: "笔",
						},
						{
							img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks175gtuAN_2AAAA5D829XH0592.jpg",
							content: "笔记本",
						}
					],
					[
						{
							img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks175XCuAQ3zaAAC1iBK7Cvg128.jpg",
							content: "内容 A",
						}, 
						{
							img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks175XD-AcVSMAAB0RlzUD-M434.jpg",
							content: "内容B",
						}, 
						{
							img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks175XFCAUfdXAAFPBRQXiLc877.jpg",
							content: "内容C",
						},
					],
					[
						{
							img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XHCAXC49AACYrBrsRsM205.jpg",
							content:"新鲜荔枝",
						},
						{
							img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XIKAK3gvAACIPxPoHNQ363.jpg",
							content:"樱桃草莓",
						},
						{
							img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XJGAU8CGAAJNRpB7hYE364.jpg",
							content:"香草柠檬",
						}
					],
				]
				this.goods = data;
			}
		}
	}
</script>

<style>
	.type-item {
		height: 100upx;
		text-align: center;
		line-height: 100upx;
		position: relative;
	}
</style>
